<template>
    <el-aside class="side-bar">
        <el-scrollbar>
            <div class="logo">
                <img src="../../../../assets/logo.svg" alt="" />
            </div>
            <el-menu class="el-menu-vertical" :default-active="path">
                <el-menu-item index="/dashboard" @click="linkTo(`dashboard`)">
                    <el-icon><DataAnalysis /></el-icon>
                    <span>当前概况</span>
                </el-menu-item>
                <el-menu-item index="/users" @click="linkTo(`users`)">
                    <el-icon><User /></el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <el-menu-item index="/notices" @click="linkTo(`notices`)">
                    <el-icon><ChatSquare /></el-icon>
                    <span>公告管理</span>
                </el-menu-item>
                <el-menu-item index="/wallpapers" @click="linkTo(`wallpapers`)">
                    <el-icon><Camera /></el-icon>
                    <span>壁纸管理</span>
                </el-menu-item>
                <el-menu-item index="/categorys" @click="linkTo(`categorys`)">
                    <el-icon><Folder /></el-icon>
                    <span>分类管理</span>
                </el-menu-item>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import {
    User,
    Folder,
    Camera,
    ChatSquare,
    DataAnalysis
} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";

const router = useRouter();
const route = useRoute();
const path = ref(route.path);

// 跳转
const linkTo = (path) => {
    router.replace(path);
};
</script>

<style lang="scss" scoped>
.side-bar {
    width: 200px;
    height: 100%;
    background-color: #fff;
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60px 0px;
        img {
            width: 150px;
        }
    }
    .el-menu-item {
        &.is-active {
            background-color: var(--el-menu-active-color);
            color: #fff;
        }
    }
}
</style>
